<template>
    <el-dialog
            v-model="visible"
            :append-to-body="true"
            :before-close="beforeClose"
            :close-on-click-modal="false"
            :title="title"
            width="35%">

        <el-form ref="dialogFormRef"
                 :model="dialogFormData"
                 :rules="dialogFormDataRules"
                 label-position="right"
                 label-width="110px">

        </el-form>
    </el-dialog>
</template>


<script setup>
import {ref, nextTick} from 'vue'

// 弹窗是否可见
const visible = ref(false)

// 弹窗标题
const title = ref('')

// 弹窗中表单ref
const dialogFormRef = ref()

// 弹窗中表单数据结构
const dialogFormBean = ref({

})

// 弹窗中表单绑定对象
const dialogFormData = ref(...dialogFormBean.value)

// 自定义触发校验器
const testAgainValidator = (rule, value, callback) => {
    if(value === '') {
        callback(new Error("test不能为空"))
    }
    callback()
}

// 弹窗中表单绑定数据对象的校验规则
const dialogFormDataRules = ref({
    test: [
        {required: true, message: `请输入test`, trigger: 'blur',},
        {validator: testeValidator, trigger: 'blur'}
    ],
})

// 弹窗关闭前钩子,需要手动调用done参数方法,才能关闭
const beforeClose = done => {
    resetDialogFormData()
    done()
}

// 重置表单绑定的数据对象
const resetDialogFormData = () => {
    nextTick(() => {
        dialogFormRef.value && dialogFormRef.value.resetFields()
    })

    Object.assign(dialogFormData.value, dialogFormBean.value)
}
</script>

<style lang="less" scoped>

</style>

<style lang="less">

</style>
